import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
import { checkUser } from '../actions/user'
import './App.scss'
import Balance from './balancePage/Balance'
import Home from './homePage/Home'
import Login from './loginPage/Login'

function App() {
	const [isLoading, setIsLoading] = useState(true)
	const isAuth = useSelector(state => state.user.isAuth)
	const dispatch = useDispatch()
	useEffect(() => {
		dispatch(checkUser())
		setTimeout(() => {
			setIsLoading(false)
		}, 2000)
	}, [])

	return (
		<BrowserRouter className='App'>
			{!isLoading ? (
				!isAuth ? (
					<Routes>
						<Route path='/login' element={<Login />} />
						<Route path='*' element={<Navigate to='/login' />} />
					</Routes>
				) : (
					<Routes>
						<Route path='/home' element={<Home />} />
						<Route path='/balance' element={<Balance />} />
						<Route path='*' element={<Navigate to='/home' />} />
					</Routes>
				)
			) : (
				<div className='loader'>
					<div className='lds-dual-ring'></div>
				</div>
			)}
		</BrowserRouter>
		// <div className='app'>
		// 	<Login />
		// </div>
	)
}

export default App
